<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<div class="ms-auto text-muted">
    {{ label }}:
    <div class="ms-2 d-inline-block">
        <input class="form-control" type="text" id="{{ name }}">
    </div>
</div>
<script>
    $(function () {

        let start = moment().subtract(29, 'days');
        let end = moment();

        function cb(start, end) {
            $('#{{name}} span').html(start.locale() + ' - ' + end.locale());
        }

        $('#{{name}}').daterangepicker({
            startDate: start,
            endDate: end,
            timePicker: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        cb(start, end);

    });
</script>
